<template>
  <view
    class="chat-home"
    :style="{
      paddingTop: navigationBarAndStatusBarHeight,
    }"
  >
    <view class="chat-name">欢迎进入ap聊天室</view>
    <view class="hd-wrap" @tap="handleModify">
      <image class="hd-img" :src="`../../static/images/${hdImg}.png`"></image>
      <image class="down" src="../../static/images/down.png"></image>
    </view>
    <view class="user-wrap">
      <input
        type="text"
        class="name"
        placeholder="请输入你的名字"
        v-model="name"
      />
    </view>
    <view class="join" @tap="handleJoin">加入</view>

    <view class="hd-img-model" v-show="isShowModel" @tap="handleModify">
      <view class="model-content" :animation="animationData">
        <view class="head-list">
          <view
            class="head-item"
            v-for="(item, index) in avatarData"
            :key="index"
            @tap="handleHead(item)"
          >
            <image :src="`../../static/images/${item}.png`"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 状态栏 + 导航栏高度
      navigationBarAndStatusBarHeight:
        uni.getStorageSync("statusBarHeight") +
        uni.getStorageSync("navigationBarHeight") +
        "px",
      name: '',
      hdImg: "a",
      isShowModel: false,
      animationData: {},
      avatarData: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"],
    };
  },
  methods: {
    handleJoin() { 
      if(!this.name.length) return
      uni.navigateTo({
        url: `../chat/index?name=${this.name}&avatar=${this.hdImg}`
      })
    },
    handleHead(item) {
      this.hdImg = item;
    },
    handleModify() {
      this.isShowModel = !this.isShowModel;

      const animation = uni.createAnimation({
        duration: 1000,
        timingFunction: "ease",
      });

      this.isShowModel
        ? animation.bottom(0).step()
        : animation.bottom().step();

      this.animationData = animation.export();
    },
  },
};
</script>

<style lang="less">
@import url("./index.less");
</style>
